<template>
  <div class="wrap">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>
      <div class="shu-moluai">
        <el-tabs style="width: 100%;" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="测温传感器" name="first">          <div class="shu-moluai main-dianli-bottomgg" id="style-1">
             <div class="mainbg-tit">测温传感器</div>
				<!-- 一组结束 -->
				<div class="con-dianvv1" >
					<table>
					<tr>
					<th width= "16.6% " class="lansezi">部门</th>
					<th width= "16.6% "  class="lansezi">设备名称</th>
					<th width= "16.6% "  class="lansezi">传感器名称</th>
					<th width= "16.6% " class="lansezi">电压值</th>
          <th width= "16.6% " class="lansezi">状态</th>
					<th width= "16.6% " class="lansezi">更新时间</th>
					</tr>		
					<tr  v-for="(item,index) in equipList" :key="index">
					<td >{{item.deptName}}</td>
					<td >{{item.cabinetName}}</td>
					<td>{{item.pointName}}</td>
					<td><span :class="item.is_warning == 1?'colred':''">{{item.value}}</span></td>
          <td><span class="colred" v-if="item.is_warning == 1">报警</span><span v-else>正常</span></td>
          <td>{{item.updateTime}}</td>
					</tr>	
					</table>
          
				</div>
        <div class="fenye">
                  <el-pagination
                    background
                          @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total" class="fenyone">
                  </el-pagination>
                </div>
				<!-- 右边模块一 -->
				
				
			    </div></el-tab-pane>

    <el-tab-pane label="局放检测器" name="second">        
      <div class="main-dianli-bottomgg" id="style-1">
             <div class="mainbg-tit">局放探测装置</div>
				<!-- 一组结束 -->
				<div class="con-dianvv1" >
					<table>
					<tr>
					<th width= "16.6% " class="lansezi">部门</th>
					<th width= "16.6% "  class="lansezi">设备名称</th>
					<th width= "16.6% "  class="lansezi">传感器名称</th>
					<th width= "16.6% " class="lansezi">电量值</th>
          <th width= "16.6% " class="lansezi">状态</th>
					<th width= "16.6% " class="lansezi">更新时间</th>
					</tr>		
					<tr  v-for="(item,index) in equipList" :key="index">
					<td >{{item.deptName}}</td>
					<td >{{item.cabinetName}}</td>
					<td>{{item.pointName}}</td>
					<td><span :class="item.is_warning == 1?'colred':''">{{item.value}}</span></td>
          <td><span class="colred" v-if="item.is_warning == 1">报警</span><span v-else>正常</span></td>
					<td>{{item.updateTime}}</td>
					</tr>	
					</table>
          
				</div>
        <div class="fenye">
                  <el-pagination
                    background
                          @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total" class="fenyone">
                  </el-pagination>
         </div>
				<!-- 右边模块一 -->
				
				
				
			    </div>
    </el-tab-pane>
    <el-tab-pane label="烟感探测器" name="third">
      <div class="con-dianvv1" >
        <div class="main-dianli-bottomgg" id="style-1">
          <div class="mainbg-tit">烟感探测器</div>
					<table>
					<tr>
					<th width= "16.6% " class="lansezi">部门</th>
					<th width= "16.6% "  class="lansezi">设备名称</th>
					<th width= "16.6% "  class="lansezi">传感器名称</th>
					<th width= "16.6% " class="lansezi">当前值</th>
          <th width= "16.6% " class="lansezi">状态</th>
					<th width= "16.6% " class="lansezi">更新时间</th>
					</tr>			
					<tr  v-for="(item,index) in equipList" :key="index">
					<td >{{item.deptName}}</td>
					<td >{{item.cabinetName}}</td>
					<td>{{item.pointName}}</td>
					<td><span :class="item.is_warning == 1?'colred':''">{{item.value}}</span></td>
          <td><span class="colred" v-if="item.is_warning == 1">报警</span><span v-else>正常</span></td>
					<td>{{item.updateTime}}</td>
					</tr>	
					</table>
          <div class="fenye">
                  <el-pagination
                    background
                          @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total" class="fenyone">
                  </el-pagination>
          </div>
        </div>
      </div>
    </el-tab-pane>   
      
    <el-tab-pane label="环境检测" name="fourth">
      <div class="con-dianvv1" >
        <div class="main-dianli-bottomgg" id="style-1">
          <div class="mainbg-tit">环境检测</div>
					<table>
					<tr>
					<th width= "16.6% " class="lansezi">部门</th>
					<th width= "16.6% "  class="lansezi">设备名称</th>
					<th width= "16.6% "  class="lansezi">传感器名称</th>
					<th width= "16.6% " class="lansezi">当前值</th>
          <th width= "16.6% " class="lansezi">状态</th>
					<th width= "16.6% " class="lansezi">更新时间</th>
					</tr>			
					<tr  v-for="(item,index) in equipList" :key="index">
					<td >{{item.deptName}}</td>
					<td >{{item.cabinetName}}</td>
					<td>{{item.pointName}}</td>
					<td><span :class="item.is_warning == 1?'colred':''">{{item.value}}</span></td>
          <td><span class="colred" v-if="item.is_warning == 1">报警</span><span v-else>正常</span></td>
					<td>{{item.updateTime}}</td>
					</tr>	
					</table>
          <div class="fenye">
                  <el-pagination
                    background
                          @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total" class="fenyone">
                  </el-pagination>
          </div>
        </div>
      </div>
      </el-tab-pane>
    

  </el-tabs>
        <!-- 右边结束 -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/common/top.vue";
export default {
  components: { Top },
  data(){
    return{
      activeName: 'second',
       baojing:0,//不想
       total:0,
      pageSize:12,
      current:1,
      currentIndex:0,
      pId:'',
      departList:[
      ],
      warnEquipList:[{equip_nick_name:"设备",level: 'warning'}],
      jfEquipList:[],
      equipList:[
      {deptName:'聊城东',
      cabinetName:'贯通调压器引出',
      pointName:'B手车下触指',
      value:'6v',
      updateTime:'2024'
      },
      {deptName:'聊城东',
      cabinetName:'贯通调压器引出',
      pointName:'B手车下触指',
      value:'6v',
      updateTime:'2024'
      },
      {deptName:'聊城东',
      cabinetName:'贯通调压器引出',
      pointName:'B手车下触指',
      value:'6v',
      updateTime:'2024'
      },
      {deptName:'聊城东',
      cabinetName:'贯通调压器引出',
      pointName:'B手车下触指',
      value:'6v',
      updateTime:'2024'
      
      },
      {deptName:'聊城东',
      cabinetName:'电源——N5柜',
      pointName:'A相手车下触指',
      value:'6v',
      updateTime:'2024'
      
      }
      ],
    }
  },
  beforeDestroy() {
    clearInterval(this.tm2);
  },
  mounted(){
    this.roomsfun()
    this.warningfun()
    this.tm2 = setInterval(() => {
      this.warningfun()
    }, 30000);
  },
  methods:{
    handleClick(tab, event) {
        console.log(tab, event);
      },
    warningfun(){
       this.loginLoading = true;
      this.$apiv.warning({}).then((res) => {
        console.log("ggg",res.data)
         if(res.data.is_ok== true){
          this.baojing = 1
        }else{
          this.baojing = 0
        }
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    roomsfun(){
      this.loginLoading = true;
      this.$apiv.rooms({}).then((res) => {
          this.departList = res.data
          if(res.data.length > 0){
            this.pId = res.data[0].deptId
          }
          this.voltagedetailfun()
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    goDepartEquip(index,id){
      this.currentIndex = index
      this.pId = id
      console.log(this.pId)
  
    },
    voltagedetailfun(){
      this.loginLoading = true;
      this.$apiv.voltagedetail({page:this.current,limit:this.pageSize}).then((res) => {
        console.log(res.data)
          // this.equipList = res.data.data
          //因后端没有数据，故开发时将其注释
					this.total = res.data.total
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
     handleCurrentChange(val){
       console.log(`当前页: ${val}`)
      this.current = val
      this.voltagedetailfun()
    },
  },
};
</script>

<style scoped>
@import url("../../../static/zhuti.css");

.fenye{
  position: absolute;
  right: 0;
  bottom: 0;
}
  

</style>
<style>
.el-tabs__content{
    height: calc(100vh - 150px)

  }
</style>